<template>
  <div class="day6">
    <div class="bg"
      :style="{filter:`blur(${scaleMap(persentage, 0, 100, 30, 0)}px)`}"></div>
    <div class="num"
      :style="{opacity:scaleMap(persentage, 0, 100, 1, 0)}">{{persentage}}%</div>

    <div class="tips">
      <div>1、absolute有正常文档流兄弟，想让兄弟在absolute层级之上。方案1：兄弟改为relative定位。 方案2：absolute定位的z-index设为-1</div>
      <div>2、filter: blur(0px);</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const persentage = ref(0)
function scaleMap(num, in_min, in_max, out_min, out_max) {
  return ((num - in_min) / (in_max - in_min)) * (out_max - out_min) + out_min
}
let timer = setInterval(bluring, 30)

function bluring() {
  persentage.value++
  if (persentage.value > 99) {
    clearInterval(timer)
  }
}
</script>

<style lang="scss" scoped>
.day6 {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(0px);
    background: url('../../assets/asuka.jpg') no-repeat center center/cover;
    // 其实cove即可，center center有点多余
    z-index: -1;
  }

  .num {
    font-size: 50px;
    color: #fff;
  }

  .tips {
    color: #fff;
    font-size: 16px;
  }
}
</style>